<template>
  <view class="search-container">
    <navigation-bar>
      <view class="top-title-bar">
        搜索
      </view>
    </navigation-bar>
    <view class="main-content-wrapper"
      :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px - 100rpx)`}">
      <view class="search-bar-wrap">
        <view class="left-ipt-bar">
          <view class="left-search-icon iconfont">
            &#xe606;
          </view>
          <view class="right-input">
            <input type="text" confirm-type="search" placeholder="端午节放假通知" v-model="iptValue" @confirm="onSearch">
          </view>
        </view>
        <view class="right-cancle">
          取消
        </view>
      </view>
      <view class="search-history-wrap">
        <scroll-view scroll-y class="search-history-list">
          <view style="height: 100%;overflow: hidden;">
            <view class="search-history-item" v-for="item in searchHistory" :key="item" @click="onSearch(item)">
              <view class="left-history-icon iconfont">
                &#xe60b;
              </view>
              <view class="right-history-text">
                {{item}}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <custom-tab-bar></custom-tab-bar>
  </view>
</template>

<script>
  import customTabBar from "@/components/custom-tab-bar/custom-tab-bar.vue"
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  export default {
    mixins: [naviHeightMix],
    data() {
      return {
        searchHistory: ['西区八舍停电', '2023年版马克思原理课本', '南区新修的两栋楼是什么楼', '蛋仔派对交流组', '文学院美女合集'] || uni.getStorageInfoSync(
          'searchHistory'),
        iptValue: ''
      };
    },
    onLoad() {
      uni.hideTabBar()
    },
    methods: {
      // 触发搜索
      onSearch: function(keyVal) {
        let key
        if (typeof keyVal === 'string') {
          key = keyVal
        } else {
          key = this.iptValue
        }
        let historyList = this.searchHistory.filter(x => x !== key)
        historyList.unshift(key)
        if (historyList.length > 20) historyList.splice(20)
        this.searchHistory = historyList
        uni.setStorageSync('searchHistory', this.searchHistory)

        this.iptValue = ''

        uni.navigateTo({
          url: `/subpkg/search-result/search-result?searchKey${key}`
        })
      },
    },
    components: {
      customTabBar
    }
  }
</script>

<style lang="scss">
  .search-container {
    height: 100%;

    .top-title-bar {
      font-size: 17px;
      font-weight: 800;
    }

    .main-content-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      &>view {
        width: 93.02%;
      }

      .search-bar-wrap {
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .left-ipt-bar {
          flex: 1;
          height: 60rpx;
          margin-right: 10rpx;
          background-color: #F3F3F3;
          border-radius: 40rpx;
          box-sizing: border-box;
          padding: 0 14rpx;
          display: flex;
          align-items: center;

          .left-search-icon {
            font-size: 40rpx;
            line-height: 40rpx;
            color: #00000080;
            margin-right: 40rpx;
          }

          .right-input {
            flex: 1;
            font-size: 32rpx;
          }
        }

        .right-cancle {
          font-size: 28rpx;
        }
      }

      .search-history-wrap {
        height: calc(100% - 60rpx);

        .search-history-list {
          height: 100%;
          padding-top: 20rpx;
          box-sizing: border-box;
          overflow: hidden;


          .search-history-item {
            margin: 44rpx 0;
            display: flex;
            align-items: center;

            .left-history-icon {
              font-size: 56rpx;
              line-height: 56rpx;
              margin-right: 40rpx;
            }

            .right-history-text {
              flex: 1;
              font-size: 32rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
</style>